<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>重力感应</title>
    <script type="text/javascript" src="./fastclick.js"></script>
    <script type="text/javascript">
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>
    <style type="text/css">
        .demo{
            width: 200px;
            height: 30px;
            appearance:button;
            -webkit-appearance:button;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        // 绑定deviceorientation事件和处理程序  
        if(window.DeviceOrientationEvent){
            window.addEventListener('deviceorientation',DeviceOrientationHandler,false);
        }else{
            alert("您的浏览器不支持DeviceOrientation");
        }
        function DeviceOrientationHandler(event){
            var alpha = event.alpha,beta = event.beta,gamma = event.gamma;
            if(alpha != null || beta != null || gamma != null){
                //各个方向旋转的值
                alert("alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma)
                 //判断屏幕方向
                if( gamma > 0 ){
                   alert("向右倾斜");
                 }else{
                   alert("向左倾斜");
                 }
             }
         }
    </script>
</script>
</body>
</html>